<%@ page language="java" contentType="text/html;  charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="ko">
	<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    
    <title>포스트보기</title>
    <link href="/resources/css/bootstrap.css" rel="stylesheet">
    <link href="/resources/css/font-awesome.min.css" rel="stylesheet">
    <link href="/resources/css/ionicons.min.css" rel="stylesheet">
    <style type="text/css">
    	@media (max-width: 1015px){
			#itembox{ width: 55%!important; }
			.subbox{ width: 43.5%!important; }
		}
    	@media (max-width: 1200px){
			.container.content { padding:0!important; padding-left:15px!important; padding-right:15px!important;}
		}
    	body {
			background-color:#EBEBEB; font-size:14px; line-height:1.428571429; color:#333; padding-bottom:0!important; padding-top:45px!important;
		}
		.container.content{
			padding-left: 100px;
			margin-top:15px;
			margin-bottom: 25px;
			overflow: hidden;
		}
		/* item */
		@media screen and (max-width: 767px){ 
			#itembox{
				width: 100%!important;
				padding:0;
				border-bottom-left-radius: 0!important;
				border-bottom-right-radius: 0!important;
			}
			.swipe-wrap > div{
				border-bottom-left-radius: 0!important;
				border-bottom-right-radius: 0!important;
			}
			.subbox{
				width: 100%!important;
				margin:0!important;
			}
			.subboxWrapper{
				border-top-left-radius: 0!important;
				border-top-right-radius: 0!important;
				border: 0!important;
			}
			.item-function {white-space:nowrap;}
			.item-function button{width:33.1%!important;font-size:13px!important;}
		}
		#itembox{
			float: left;
			width: 545px;
			background-color: #fff;
			-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			border-radius: 4px;
			overflow: hidden;
			position: relative;
			white-space: nowrap;
			-webkit-transition: all 0.2s;
	    	-moz-transition: all 0.2s;
	    	-o-transition: all 0.2s;
	    	transition: all 0.2s;
		}
		.item-image{
			width: 100%;
			height: 100%;
			position: relative;
			margin: 0;
			padding: 0;
			overflow: hidden;
			-webkit-transition: all 0.2s;
	    	-moz-transition: all 0.2s;
	    	-o-transition: all 0.2s;
	    	transition: all 0.2s;
		}
		.item-content{
			padding: 12px;
		}
		.section-count{
			font-size: 13px;
			padding: 14px;
		}
		.item-function{
			padding: 6px 8px 10px 8px;
			position: relative;
			border-top: 1px solid #e7e7e7;
		}
		.item-function button{
			width: auto;
			border: 0;
			background-color: #fff;
			color: #555;
			font-size: 12px;
		}
		.item-function button > span{
			font-size: 13px;
			font-weight: bold;
			color: #555;
			padding-left: 5px;
		}
		
		.comment-wrapper{
			height: 100%;
			background-color: #f3f3f3;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
			padding-bottom: 5px;
		}
		#item-commentList{
			padding: 12px 8px 0 8px;
			overflow: hidden;
		}
		.comment{
			width: 100%;
			min-height: 45px;
			margin-bottom: 5px;
			position: relative;
			transform : translate3d(0,0,0);
			-webkit-transform : translate3d(0,0,0);
			-o-transform : translate3d(0,0,0);
			-webkit-transition-duration: 250ms;
			-moz-transition-duration: 250ms;
			transition-duration: 250ms;
			-webkit-transition-timing-function: ease-in-out;
			-moz-transition-timing-function: ease-in-out;
			transition-timing-function: ease-in-out;
			-webkit-transition-property: -webkit-transform;
			-moz-transition-property: -moz-transform;
			transition-property: transform;
		}
		.comment > .comment-profileImage{
			padding-top: 3px;
			float: left;
		}
		.comment > .comment-profileImage > a > img{
			width: 35px;
			height: 35px;
		}
		.comment > .comment-info{
			margin-left: 45px;
		}
		.comment > .comment-info > .comment-content{
			padding-bottom: 6px;
			word-break: break-all;
		}
		.comment > .comment-info > .comment-time{
			font-size: 12px;
			color: #AAA;
			margin-left: 8px;
		}
		.comment > .comment-edit-delete{
			position: absolute;
			top: 0;
			right: -140px;
			height: 100%;
		}
		.comment > .comment-edit-delete button{
			color: #fff;
			height: 100%;
			width: 65px;
			border: 0;
		}
		.comment > .comment-edit-delete > .cmt-update{
			background-color: #43cee6;
			margin-right: 1px;
		}
		.comment > .comment-edit-delete > .cmt-delete{
			background-color: #ef4e3a;
		}
		#comment-write{
			position: relative;
			padding: 2px 8px 8px 8px;
			position: relative;
		}
		#comment-more{
			text-align: left;
			padding: 12px 12px 8px 6px;
			cursor: pointer;
		}
		#comment-update{
			display: none;
			padding: 8px 75px 8px 8px;
			height: 51px;
			position: relative;
		}
		#comment-update > input{
			width: 100%;
			height: 30px;
			border: 1px solid #E9E9E9;
			border-radius: 2px;
			padding: 4px 0 4px 6px;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
		}
		#inputComment{
			width: 100%;
			height: 30px;
			border: 1px solid #E9E9E9;
			border-radius: 2px;
			padding: 4px 0 4px 6px;
			box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
			overflow: visible;
		}
		#comment-submit{ display: none; position: absolute; top:2px; right:5px; padding:5px 16px; font-size: 13px; height:30px; }
		
		.subbox{
			float: left;
			width: 424px;
			margin-left: 10px;
		}
		.subboxWrapper{
			background-color: #fff;
			-moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
			border-radius: 4px;
			margin-bottom: 15px;
		}
		
		.list-inline > li{ padding: 0; }
		.post_line{ width: 100%; height: 1px; background-color: #e4e4e4; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
		
		.post-source{ padding: 6px 12px; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 13px; }
		.item-tag a{ display: inline-block; margin-right: 4px; text-decoration: none; }

		.swipe { overflow: hidden; visibility: hidden; position: relative; border-radius: 4px; }
		.swipe-wrap { height: 100%; overflow: hidden; position: relative; border-radius: 4px; }
		.swipe-wrap > div { float: left; width: 100%; position: relative; border-radius: 4px; overflow: hidden; display: block; text-align: center; }
		.swipe-wrap > div > img{ max-width: 100%; height: auto; border-top-left-radius: 4px; border-top-right-radius: 4px; }
		#likemember-list{ padding-left:0; list-style: none; }
		#likemember-list li{ width: 100%; position: relative; padding: 10px 0; border-bottom: 1px solid #eee; }
		#likemember-list li:hover{ background-color: #f8f8f8; }
		#likemember-list div > a > img{ width: 40px; height: 40px; border-radius: 2px; }
		#likemember-list div{ position: absolute; top: 13px; left: 0; }
		#likemember-list p{ padding-left: 55px; }
		#likemember-list button{ position: absolute; top: 15px; right:0; }
		#likemember-list .lm-name{ font-size: 15px; color: #527896; }
		#likemember-list .lm-id{ text-decoration: none; color: #8f8f8f; font-size: 13px; }
		
		/* header */
		.header{ width:100%; height:44px; background-color:#fff; border-bottom:1px solid #ddd; text-align:center; z-index:100; }
		.header > .logo { width:58px; height:44px; margin:0 auto; padding-top:10px; display:block; }
		.header > .logo img {width:58px; height:22px; }
		.header h1{ font-size:16px; margin:0; padding-top:12px; }
		.header button { position:absolute; top:0; height:43px; padding:0; margin:0; border:0; background-color:#fff; color:#999; }
		.header .btn-left { left:12px; }
		.header .btn-right { right:12px; }
		
		.f_modal{
			display: none;
			z-index: 1000;
			background-color: transparent;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: background-color ease-in-out 300ms;
			-webkit-transition: background-color ease-in-out 300ms;
			-o-transition: background-color ease-in-out 300ms;
		}
		.f_modal.active{
			background-color: rgba(0,0,0,.5);
		}
		.f_action_sheet{
			transform: translate3d(0,100%,0);
			-webkit-transform: translate3d(0,100%,0);
			-o-transform: translate3d(0,100%,0);
			position:absolute;
			bottom:0;
			width:100%;
			transition: all ease-in-out 300ms;
			-webkit-transition: all ease-in-out 300ms;
			-o-transition: all ease-in-out 300ms;
		}
		.f_action_sheet button { background-color:#fff;border-radius:3px;text-align:center;min-height:47px;border:0;width:100%;margin-bottom:5px;font-size:18px;color:#4a87ee; }
		.f_action_sheet.open{
			transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-o-transform: translate3d(0,0,0);
		}
    </style>
</head>

<body>
<div class="header" style="position: fixed; top:0;">
	<button type="button" class="btn-left" style="color:#017AFC; font-size:32px;" onclick="window.close()">
		<i class="ion-arrow-left-c"></i>
	</button>
	<h1 class="title">사진</h1>
</div>
	<!-- content -->
	<div class="container content">
		<div style="width: 100%;">
			<div id="itembox">
				
			</div>
			<div class="subbox">
				<div class="subboxWrapper">
					<div class="post-profile" style="height: 85px; padding:12px;">
						<div class="profile-img" style="width:56px; float:left;">
	   						
	   					</div>
	   					<div class="profile-info" style="margin-left: 60px; margin-top: 3px; ">
	   						<div style="position: relative;">
	   							<div style="margin-bottom: 4px; font-size: 16px; font-weight: bold;"><a id="member-link" href="" style="color: #54301a; text-decoration: none;"></a></div>
	   						</div>
	   						<div>
	   							<div style="margin:0; color: #aaa; display: block; float:left; font-size: 12px;" id="time_left"></div>
	   							<div style="float: right;"></div>
	   						</div>
	   					</div>
	   				</div>
	   				<div class="item-content">
						<p id="post-content" style="word-break: break-all;"></p>
					</div>
					<div class="item-tag" style="padding:12px;">
						
					</div>
					<div class="post-source">
						
					</div>
					<div class="section-count">
						
					</div>
	 				<div class="item-function">
	 					<button type="button" title="공유하기" onclick="postShare()"><i class="icon ion-share" style="font-size: 18px;"></i>&nbsp;공유하기</button>
						<button type="button" title="더보기" onclick="moreMenu()"><i class="icon ion-more" style="font-size: 18px; cursor: pointer;"></i>&nbsp;더보기</button>
	 				</div>
					
					<div class="comment-wrapper">
						<div class="post_line"></div>
						<div id="comment-more" onclick="index+=8; getMoreComment();"><i class="ion-loading-c" id="comment-more-loading" style="font-size:16px;color:#888; display:none;"></i>&nbsp;이전 댓글 보기</div>
						<div id="item-commentList"></div>
						<div id="comment-write"><input id="inputComment" name="inputComment" maxlength="300" placeholder="댓글을 남겨보세요..."><button type="button" id="comment-submit" class="btn btn-success btn-sm" onclick="submitComment(this)">전송</button></div>				
						<div id="comment-update"><input id="updateComment" maxlength="300" style="width: 100%!important;"><button type="button" id="commentUpdateBtn" style="position: absolute; top:8px; right:5px; padding:5px 16px; font-size: 13px; height:30px;" class="btn btn-success btn-sm" onclick="comment_update(this)">전송</button></div>					
						<input type="hidden" id="comment-type" name="comment-type" value="default">
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- end container -->
<!-- content -->
<input type="hidden" id="editCommentIdx" name="editCommentIdx">
<!-- reports dialog -->
<div class="modal fade" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true" style="z-index:1100;">
	<div class="modal-dialog" style="max-width: 350px;">
		<div class="modal-content">
			<form id="report-form" method="post">
			<input type="hidden" id="report-idx" name="report-idx">
			<input type="hidden" id="report-type" name="report-type">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4 class="modal-title">신고하기</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label for="report-reason">이 게시물을 신고하는 이유가 무엇인가요?</label>
					<select class="form-control" id="report-reason" name="report-reason" title="선택">
						<option value="spam">스팸 및 광고</option>
						<option value="improper">부적절한 주제</option>
						<option value="steal">도용 및 저작권 침해</option>
						<option value="speech">욕설 및 불편한 언어</option>
						<option value="porno">음란성</option>
						<option value="other">기타</option>
					</select> 
				</div>
				<div class="form-group">
					<label for="report-opinion">추가의견</label>
					<textarea id="report-opinion" name="report-opinion" class="form-control" rows="3" cols="250" maxlength="200" style="resize:none;"></textarea>
				</div>
			</div>
			<div class="modal-footer" style="border-top:0;margin-top:0;padding:0 15px 15px 15px;">
				<button type="button" class="btn btn-primary btn-lg btn-block" onclick="report_submit(this);">보내기</button>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- reports dialog -->

<div class="f_modal" id="f_action_sheet" tabindex="-1" onclick="f_modal.hide(this)">
	<div class="f_action_sheet" style="padding:0 15px;">
		<button>취소</button>
	</div>
</div>

<div class="modal fade" id="likemember-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog" style="max-width: 350px; margin:15px auto;">
		<div class="modal-content">
			<div class="modal-header" style="border-bottom:0;padding-bottom:0;">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="font-size: 28px;">×</button>
		        <h4>좋아하는 사람들</h4>
			</div>
			<div class="modal-body">
				<div id="likemember-list-loading" style="display: none;padding: 25px 0; text-align: center;"><img src="/resources/img/loading-20x20-white.gif"></div>
				<ul id="likemember-list"></ul>
			</div>
		</div>
	</div>
</div>
<script src="/resources/js/jquery-1.11.0.js"></script>
<script src="/resources/js/bootstrap.js"></script>
<script src='/resources/js/spin.min.js'></script>
<script src="/resources/js/parseEmoji.js"></script>
<script src="/resources/js/imagesloaded.pkgd.min.js"></script>
<script src="/resources/js/swipe.js"></script>
<script src="/resources/js/jquery.touchSwipe.min.js"></script>
<script src="/resources/js/cordova.js"></script>
<script src="/resources/js/SocialSharing.js"></script>
<script src="/resources/js/m_commonScript.js"></script>
<script type="text/javascript">
	var member_idx = localStorage.getItem("idx");
	var member_name = localStorage.getItem("name");
	var member_id = localStorage.getItem("id");
	var index = 0;
	var loadComment_cnt = 0;
	var post_idx;
	var comment_cnt;
	var postUrl;
	
	var post_memberIdx;
	var post_image1;
	var likeMemberIndex = 0;
	
	var share_content;
	var share_title;
	
    $(function(){
    	
   	}); // end document
   	
   	$(document).on({
		focusin: function () {
			$(this).parent().css("padding-right","75px");
			$("#comment-submit").show();
		},
		focusout: function () {
			if($(this).val().length == 0){
				$("#comment-submit").hide();
				$(this).parent().css("padding-right","15px");
			}
		}
	}, "#inputComment");
   	
   	function showLikeMember(idx){
   		$("#likemember-list").empty();
   		$("#likemember-modal").modal("show");
		$.ajax({
			type : "post"
		    , url : "http://faeple.com/getPostLikeMemberList?post_idx="+idx+"&index="+likeMemberIndex+"&loadSize=40"
		    , dataType : "json"
		    , timeout : 5000
		  	, error : function() {
	  			$("#likemember-list").html("<li style='text-align:center;'>불러올 수 없습니다</li>");
		    }
		    , success : function(response) {
		    	var html = "";
		    	for(var i=0;i<response.length;i++){
		    		html += "<li><div><a href='profile.html?id="+response[i].member_id+"' target='_blank'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+response[i].profileImage+"'></a></div><p><a target='_blank' class='lm-name' href='profile.html?id="+response[i].member_id+"'>"+response[i].member_name+"</a><br><a target='_blank' class='lm-id' href='profile.html?id="+response[i].member_id+"'>@"+response[i].member_id+"</a></p>";
		    		if(response[i].followState == "unFollow"){
		    			html += "<button type='button' class='btn btn-default btn-sm' onclick='follow(this, \"follow\", "+response[i].member_idx+")'>팔로우</button></li>";
		    		}else if(response[i].followState == "following"){
		    			html += "<button type='button' class='btn btn-success btn-sm' onclick='follow(this, \"unfollow\", "+response[i].member_idx+")'><i class='fa fa-check'></i>&nbsp;팔로잉</button></li>";
		    		}else{
		    			html += "</li>";
		    		}
		    	}
		    	$("#likemember-list").append(html);
		    }, beforeSend: function() {
		    	$("#likemember-list-loading").show();
		    }, complete : function(){
		    	$("#likemember-list-loading").hide();
		    }
		});
   	}
   	
   	function getMoreComment(){
   		$.ajax({
   			type : "post"
		    , url : "http://faeple.com/getCommentWithPost?post_idx="+post_idx+"&index="+index+"&order=createdate"
		    , dataType : "json"
		    , timeout : 5000
		    , error : function() {
		    	$("#item-commentList").prepend("<div style='text-align:center;'><i class='glyphicon glyphicon-remove' style='color:#BF0000;'></i>&nbsp;댓글을 가져올 수 없습니다.</div>");
		    }
		    , success : function(data) {
		    	if(data != ""){
		    		var comments = $("#item-commentList");
		    		for(var i=data.length-1;i>-1;i--){
		    			var comm = "<div class='comment' data-idx='"+data[i].idx+"' data-memidx='"+data[i].member_idx+"'><div class='comment-profileImage'><a href='profile.html?id="+data[i].member_id+"'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+data[i].profileImage+"'></a></div><div class='comment-info'><span class='comment-author'><a href='profile.html?id="+data[i].member_id+"' target='_blank' class='userLink' style='font-weight:bold;'>"+data[i].author+"</a></span><span class='comment-time'>"+timeleft(data[i].create_date)+"</span><div class='comment-content'>"+parseContent(data[i].content).parseEmoji()+"</div></div>";
		    			if(member_idx == data[i].member_idx){
		    				comm += "<div class='comment-edit-delete'><button type='button' class='cmt-update' onclick='comment_update_init(this, "+data[i].idx+")'>수정</button><button type='button' onclick='comment_del(this, "+data[i].idx+")' class='cmt-delete'>삭제</button></div></div>";
		    			}else{
		    				comm += "<div class='comment-edit-delete'><button type='button' class='cmt-update' onclick='commentReply(this, \""+data[i].member_id+"\")'>답변</button><button type='button' onclick='reports("+data[i].idx+",\"comment\" )' class='cmt-delete'>신고</button></div></div>";
		    			}
		    			var $comment = $(comm);
		    			$comment.swipe({
				   			swipeStatus : function(event, phase, direction, distance, duration, fingers){
				   				var box = $(this);
				   				if(direction=="left"){
				   					if(distance < 60){
				   						box.attr("style", "transform:translate3d(-"+distance+"px,0,0);-webkit-transform:translate3d(-"+distance+"px,0,0);-webkit-transition:none;transition:none");
				   						if(phase == "end"){
				   	   						box.removeAttr("style");
				   	   					}
				   					}else{
				   						box.removeAttr("style");
				   						box.css({"transform":"translate3d(-130px,0,0)","-webkit-transform":"translate3d(-130px,0,0)"});
				   					}
				   					
				   				}else if(direction=="right"){
				   					box.css({"transform":"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"});
				   				}
				            },
				            threshold : 0,
				            allowPageScroll:"vertical"
						});
		    			comments.prepend($comment);
		    			loadComment_cnt++;
 			    	}
		    		if(loadComment_cnt == comment_cnt){
		    			$("#comment-more").hide();
		    		}
		    	}else{
		    		$("#comment-more").hide();
		    	}
		    	
		    }
		    , beforeSend: function() {
		    	$("#comment-more-loading").show();
		    }
		    , complete: function() {
		    	$("#comment-more-loading").hide();
		    }
   		});
   	}
    	
   	String.prototype.parseTagUser = function() {
   		hashpattern = /(@[A-Za-z0-9-_]+)/g;
   		return this.match(hashpattern);
   	};
   
   	function sourceCheck(url){
		if (!/^http:\/\//.test(url)) {
	        return "http://" + url;
	    }else{
	    	return url;
	    }
	}
   	
   	function submitComment(btn){
   		var tagUser = $("#inputComment").val().parseTagUser();
   		if(tagUser != null) tagUser = tagUser.toString();
   		var data = "post_idx="+post_idx+"&content="+$("#inputComment").val()+"&author_idx="+post_memberIdx+"&refer_img="+post_image1+"&refer_url="+postUrl+"&tagUser="+tagUser+"&comment-type="+$("#comment-type").val();
   		var name = localStorage.getItem("name");
   		var id = localStorage.getItem("id");
		if($("#inputComment").val() != ""){
			$.ajax({
   				type : "post"
   			    , url : "http://faeple.com/submitComment"
   			    , data : data
   			    , dataType : "text"
   			    , timeout : 5000
   			  	, error : function() {
   			  		alertShow("danger","다시 시도해주세요", 2000);
   			    }
   			    , success : function(response) {
   			    	if(response != "role" && response != "tag"){
   			    		var $comment = $("<div class='comment' data-idx='"+response+"' data-memidx='"+localStorage.getItem("idx")+"'><div class='comment-profileImage'><a href='me.html'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+localStorage.getItem("profileImage")+"'></a></div><div class='comment-info'><span class='comment-author'><a href='me.html' class='userLink' style='font-weight:bold;'>"+name+"</a></span><span class='comment-time'>방금전</span><div class='comment-content'>"+parseContent($("#inputComment").val())+"</div></div><div class='comment-edit-delete'><button type='button' class='cmt-update' onclick='comment_update_init(this, "+response+")'>수정</button><button type='button' onclick='comment_del(this, "+response+")' class='cmt-delete'>삭제</button></div></div></div>");
   			    		$comment.swipe({
				   			swipeStatus : function(event, phase, direction, distance, duration, fingers){
				   				var box = $(this);
				   				if(direction=="left"){
				   					if(distance < 60){
				   						box.attr("style", "transform:translate3d(-"+distance+"px,0,0);-webkit-transform:translate3d(-"+distance+"px,0,0);-webkit-transition:none;transition:none");
				   						if(phase == "end"){
				   	   						box.removeAttr("style");
				   	   					}
				   					}else{
				   						box.removeAttr("style");
				   						box.css({"transform":"translate3d(-130px,0,0)","-webkit-transform":"translate3d(-130px,0,0)"});
				   					}
				   					
				   				}else if(direction=="right"){
				   					box.css({"transform":"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"});
				   				}
				            },
				            threshold : 0,
				            allowPageScroll:"vertical"
						});
   			    		$("#item-commentList").append($comment);
   			    		$("#inputComment").val("");
   			    		alertShow("success","댓글이 작성되었습니다", 2000);
   			    		$("#comment-cnt").html(parseInt($("#comment-cnt").html())+1);
   			    	}else if(response == "role"){
   			    		navigator.notification.alert("로그인이 필요합니다", null, "댓글쓰기", "확인");
   			    		navigator.notification.vibrate(500);
   			    		window.location = "index.html";
   			    	}else if(response == "tag"){
   			    		alertShow("info","<strong>상대방 태그가 잘못되었습니다</strong><br>아이디를 확인해 주세요", 6000);
   			    	}
   			    	$("#comment-type").val("default");
   			    }
				, beforeSend: function() {
					$(btn).attr("disabled", "disabled").html("전송중..");
				}
				, complete: function() {
					$(btn).removeAttr("disabled").html("전송");
				}
   			});
		}else{
			$("#inputComment").val("");
			alertShow("danger","내용을 입력해 주세요", 2000);
		}
   	}
    	
   	function commentReply(el, id){
   		$(el).closest(".comment").removeAttr("style");
   		$("#inputComment").val("@"+id+" ").focus();
   		$("#comment-submit").show();
		$("#comment-write").css({"padding-right":"70px"});
		document.body.scrollTop = document.body.scrollHeight;
   		$("#comment-type").val("reply");
   	}
    	
   	function like(button, post_idx, author_idx, refer_img, refer_url, author_id){
   		var data = "post_idx="+post_idx+"&author_idx="+author_idx+"&refer_img="+refer_img+"&refer_url="+refer_url+"&author_id="+author_id;
		$.ajax({
			type: "post",
		    url: "http://faeple.com/addLike",
		    data: data,
		    dataType: "text",
		    timeout: 5000,
		    error: function () {
		        alertShow("danger", "다시 시도해주세요", 2000);
		    },
		    success: function (response) {
		        if (response == "unlike") {
		        	$(button).css("color","#555");
		        	$("#like-cnt").html(parseInt($("#like-cnt").html())-1);
		        } else if (response == "execute") {
		        	$(button).css("color","#cc2e35");
		        	$("#like-cnt").html(parseInt($("#like-cnt").html())+1);
		        } else {
		        	navigator.notification.alert("로그인이 필요합니다", null, "좋아요", "확인");
		    		navigator.notification.vibrate(500);
		    		window.location = "index.html";
		        }
		    }
		});
   	}
   	
   	function reports(idx, type){
   		$("#report-idx").val(idx);
   		if(type=="comment"){
   			$("#report-reason").prev().html("이 댓글을 신고하는 이유가 무엇인가요?");
   			$("#report-type").val("comment");
   		}else{
   			$("#report-reason").prev().html("이 게시물을 신고하는 이유가 무엇인가요?");
   			$("#report-type").val("post");
   		}
   		$("#report-modal").modal("show");
   	}
    	
   	function comment_del(el, idx){
   		navigator.notification.vibrate(500);
		navigator.notification.confirm("정말로 삭제할까요?",function(btn){
			if(btn==1){
				$.ajax({
	       			type : "post"
	   			    , url : "http://faeple.com/commentDelete?comment_idx="+idx
	   			    , dataType : "text"
	   			    , timeout : 5000
	   			    , error : function() {
	   			    	
	   			    }
	   			    , success : function(response) {
	   			    	if(response == "execute"){
	   			    		$(el).closest(".comment").remove();
	   			    		$("#comment-cnt").html(parseInt($("#comment-cnt").html())-1);
	   			    		alertShow("success","삭제되었습니다", 2000);
	   			    	}else if(response == "fail"){
	   			    		alertShow("danger","다시 시도해주세요", 2000);
	   			    	}else{
	   			    		navigator.notification.alert("로그인이 필요합니다", null, "삭제", "확인");
	   			    		navigator.notification.vibrate(500);
	   			    		window.location = "index.html";
	   			    	}
	   			    }
	       		});
			}else{
				$(el).closest(".comment").removeAttr("style");
			}
		},"댓글삭제","확인,취소");
   	}
    
   	function comment_update_init(el, idx){
   		$("#editCommentIdx").val(idx);
   		$("#comment-update").show();
   		$(el).closest(".comment").removeAttr("style");
   		$("#updateComment").val($(el).closest(".comment").find(".comment-content").html());
   		$("#comment-write").hide();
   	}
   	
   	function comment_update(){
   		var data = "comment_idx="+$("#editCommentIdx").val()+"&content="+$("#updateComment").val();
   		$.ajax({
   			type : "post"
		    , url : "http://faeple.com/commentUpdate"
		   	, data : data
		    , dataType : "text"
		    , timeout : 5000
		    , error : function() {
		    	alertShow("danger","서버가 응답하지 않습니다", 2000);
		    }
		    , success : function(response) {
		    	if(response == "execute"){
		    		$("#item-commentList > .comment").each(function(){
		    			if($(this).data("idx") == $("#editCommentIdx").val()){
		    				$(this).children(".comment-info").children(".comment-content").html(parseContent($("#updateComment").val()));
       			    		$("#updateComment").val("");
       			    		$("#inputComment").val("");
       			    		$("#comment-update").hide();
       			    		$("#comment-write").show();
		    			}
   			    	});
		    		alertShow("success","수정되었습니다", 2000);
		    	}else if(response == "fail"){
		    		alertShow("danger","다시 시도해주세요", 2000);
		    	}else{
		    		navigator.notification.alert("로그인이 필요합니다", null, "수정", "확인");
		    		navigator.notification.vibrate(500);
		    		window.location = "index.html";
		    	}
		    }
		    , beforeSend: function() {
		    	$("#commentUpdateBtn").attr("disabled","disabled");
		    }
		    , complete: function() {
		    	$("#commentUpdateBtn").removeAttr("disabled","disabled");
		    }
   		});
   	}
    	
	function follow(obj, type, idx) {
		var data = "following_idx="+idx;
		if (type == "follow") {
			$(obj).html("<i class='ion-loading-c' style='font-size:16px;color:#999;'>");
			$.ajax({
				type: "post",
				url: "http://faeple.com/follow",
				data: data,
				dataType: "text",
				timeout: 5000,
				error: function(){
					alertShow("danger", "다시 시도해주세요", 2000);
				},
				success: function(response){
					if(response == "success"){
						$(obj).removeClass("btn-default").addClass("btn-success").html("<i class='fa fa-check'></i>&nbsp;팔로잉").attr("onclick", "follow(this, 'unfollow' , "+idx+");").hide(0).fadeIn();
					}else if(response == "closed"){
						alertShow("info", "팔로우를 받지 않는 사용자입니다", 2000);
						$(obj).html("팔로우");
					}else if(response == "role") {
						navigator.notification.alert("로그인이 필요합니다", null, "팔로우", "확인");
			    		navigator.notification.vibrate(500);
			    		window.location = "index.html";
					}else{
						alertShow("danger", "다시 시도해주세요", 2000);
						$(obj).html("팔로우");
					}
				}
			});
		}else{
			$(obj).html("<i class='ion-loading-c' style='font-size:16px;color:#fff;'>");
			$.ajax({
				type: "post",
				url: "http://faeple.com/unFollow",
				data: data,
				dataType: "text",
				timeout: 5000,
				error: function(){
					alertShow("danger", "다시 시도해주세요", 2000);
					$(obj).html("<i class='fa fa-check'></i>&nbsp;팔로잉");
				},
				success: function (response) {
					if(response == "fail"){
						alertShow("danger", "다시 시도해주세요", 2000);
						$(obj).html("<i class='fa fa-check'></i>&nbsp;팔로잉");
					}else{
						$(obj).removeAttr("data-state").removeClass("btn-success").addClass("btn-default").attr("onclick", "follow(this, 'follow', "+idx+");").html("팔로우").hide(0).fadeIn();
					}
				}
			});
		}
	}
   	
	function report_submit(obj){
		if($("#report-type").val() != "none"){
			$(obj).html("전송중...").attr("disabled", "disabled");
			setTimeout(function(){
				$.ajax({
					type : "post"
					, url : "http://faeple.com/submitReport"
					, dataType : "text"
					, data : $("#report-form").serialize()
					, timeout : 5000
					, error : function() {
						alertShow("danger", "다시 시도해주세요" ,1500);
						$(obj).html("보내기").removeAttr("disabled");
					}
					, success : function(response) {
						if(response){
							alertShow("success", "신고되었습니다" ,1500);
						}else{
							alertShow("danger", "다시 시도해주세요" ,1500);
						}
						$("#report-modal").modal("hide");
					}
					, complete: function(){
						$(obj).html("보내기").removeAttr("disabled");
						$("#report-form")[0].reset();
					}
				});
			}, 500);
		}else{
			alertShow("danger", "신고유형을 선택해 주세요" ,1500);
		}
	}
	
	function moreMenu(){
		f_modal.show("f_action_sheet");
	}
	
	function postUpdate(idx){
		alert(idx);
	}
	function postDelete(idx){
		navigator.notification.confirm("게시물을 정말로 삭제하시겠습니까?",function(btn){
			if(btn==1){
				$.ajax({
					type : "post"
				    , url : "http://faeple.com/post_delete?post_idx="+idx
				    , dataType : "text"
				    , timeout : 5000
				  	, error : function() {
				  		alertShow("danger", "다시 시도해주세요" ,1500);
				    }
				    , success : function(response) {
				    	if(response == "execute"){
				    		alertShow("success", "삭제되었습니다" ,1500);
				    		setTimeout(function(){
				    			window.location = 'me.html';
				    		},1000);
				    	}else{
				    		alertShow("danger", "잘못된 접근입니다" ,1500);
				    	}
				    }
				});
			}
		},"게시물 삭제","확인,취소");
	}
	
	function postShare(){
		share_content = share_content.replace(/<br>/gi, '\n');
		if(share_content.length > 100){
			share_content.substring(0,99);
		}
		window.plugins.socialsharing.share(share_content, share_title, 'http://faeple.com/resources/upload/post/thumbnail/'+post_image1, 'http://faeple.com/p/'+postUrl);
	}
	
	document.addEventListener("deviceready", onDeviceReady, false);
	function onDeviceReady(){
		postUrl = location.href.split("=")[1];
		$.ajax({
    		type : "get"
    	    , url : "/mobile/getPost?url="+postUrl
    	    , dataType : "json"
    	    , timeout : 5000
    	    , error : function(request,status,error) {
    	    	alert(request.status);
    	    }
    	    , success : function(data) {
    	    	post_idx = data.idx;
    	    	comment_cnt = data.comment_cnt;
    	    	post_memberIdx = data.member_idx;
    	    	post_image1 = data.image1;
    	    	share_content = data.content;
    	    	share_title = data.title;
    	    	var imgLength = 0;
    	    	commentIndex = 0;
    	    	
				var html = "<div id='mySwipe' style='width:100%;' class='swipe'><div class='swipe-wrap'>";
				for(var i=1;i<9;i++){
					if(eval("data.image"+i) != null){
						if(eval("data.image"+i).trim() != ""){
							imgLength++;
							if(i == 1){
								html += "<div><img src='http://faeple.com/resources/upload/post/thumbnail/"+eval("data.image"+i)+"' onload='$(\"#itembox\").css(\"height\",$(this).height());'></div>";
							}else{
								html += "<div><img src='http://faeple.com/resources/upload/post/thumbnail/"+eval("data.image"+i)+"'></div>";
							}
						}
					}
				}
    	    	html += "</div></div>";
    	    	if(imgLength != 1) {
    	    		html += "<div style='position:absolute; bottom: 20px; left:0; width:100%; text-align:center;'><ol class='carousel-indicators' id='image-list' style='margin:0; position: static; width:100%; opacity:.85;'>";
    	    		for(var j=0;j<imgLength;j++){
    	    			if(j==0) html += "<li class='active' data-index='"+j+"'></li>";
    	    			else html += "<li data-index='"+j+"'></li>";
    	    		}
    	    		html += "</ol></div>";
    	    	}
    	    	$("#itembox").html(html);
    	    	
    	    	$("#time_left").html(timeleft(data.create_date));
    	    	if(data.followState != "me"){
    	    		if(data.followState == "unFollow"){
    	    			$("#time_left").next().html("<button type='button' class='btn btn-default btn-sm' onclick='follow(this, \"follow\", "+data.member_idx+");' title='팔로우' style='width: 70px;'>팔로우</button>");
    	    		}else{
    	    			$("#time_left").next().html("<button type='button' class='btn btn-success btn-sm' onclick='follow(this, \"unfollow\", "+data.member_idx+");' title='팔로우' style='width: 70px;'><i class='fa fa-check'></i>&nbsp;팔로잉</button>");
    	    		}
    	    		$(".profile-img").html("<a href='profile.html?id="+data.member_id+"'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+data.profileImage+"' width='50px;' height='50px;' style='border-radius: 50%;' title='"+data.author+"'></a>");
    	    		$("#member-link").attr("href","profile.html?id="+data.member_id).html(data.author+"&nbsp;<small style='color: #c8c8c8; font-weight: normal;'>@"+data.member_id+"</small>");
    	    	}else{
    	    		$("#member-link").attr("href","me.html").html(data.author+"&nbsp;<small style='color: #c8c8c8; font-weight: normal;'>@"+data.member_id+"</small>");
    	    		$(".profile-img").html("<a href='me.html'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+data.profileImage+"' width='50px;' height='50px;' style='border-radius: 50%;' title='"+data.author+"'></a>");
    	    	}
				$("#post-content").html(parseContent(data.content.parseEmoji()));
    	    	
				try{
					if(data.tags.length != 0){
						var item_tag = $(".item-tag");
						for(var e=0;e<data.tags.length;e++){
							item_tag.append("<a target='_blank' href='hashtag.html?tag="+data.tags[e].name.replace(/&/gi,"%26").replace(/\./g, "%2E")+"' title='"+data.tags[e].name+"'><span class='label label-default'>"+data.tags[e].name+"</span></a>");
						}
					}
				}catch(e){}
				
    	    	if(data.source != "" && data.source != null){
    	    		$(".post-source").html("<span>출처 : <span onclick='window.open(\""+sourceCheck(data.source)+"\", \"_system\")'>"+data.source+"</span></span>");
    	    	}
    	    	if(data.like_cnt == 0){
    	    		$(".section-count").append("<span>좋아요&nbsp;<strong id='like-cnt'>0</strong></span>&nbsp;&nbsp;");
    	    	}else{
    	    		$(".section-count").append("<span onclick='showLikeMember("+post_idx+")'>좋아요&nbsp;<strong id='like-cnt'>"+data.like_cnt+"</strong></span>&nbsp;&nbsp;");
    	    	}
    	    	$(".section-count").append("&nbsp;&nbsp;<span style='cursor:pointer;' onclick='$(\"#inputComment\").focus();'>댓글&nbsp;<strong id='comment-cnt'>"+data.comment_cnt+"</strong></span>");
    	    	
    	    	if(data.likeState == "unlike"){
    	    		$(".item-function").prepend("<button type='button' title='좋아요' onclick='like(this, "+data.idx+", "+data.member_idx+", \""+data.image1+"\", \""+data.url+"\", \""+shareParse(data.title)+"\")'><i class='fa fa-heart' style='font-size: 13px;'></i>&nbsp;좋아요</button>");
    	    	}else{
    	    		$(".item-function").prepend("<button type='button' title='좋아요' style='color:#cc2e35;' onclick='like(this, "+data.idx+", "+data.member_idx+", \""+data.image1+"\", \""+data.url+"\", \""+shareParse(data.title)+"\")'><i class='fa fa-heart' style='font-size: 13px;'></i>&nbsp;좋아요</button>");
    	    	}
    	    	
    	    	if(data.comment_cnt != 0){
    	    		if(data.comment_cnt <= 8){
    	    			$("#comment-more").hide();
    	    		}
    	    		var comment = "";
    	    		for(var k=data.comment.length-1;k>-1;k--){
       	      			comment += "<div class='comment' data-idx='"+data.comment[k].idx+"' data-memidx='"+data.comment[k].member_idx+"'><div class='comment-profileImage'><a href='profile.html?id="+data.comment[k].author+"'><img src='http://faeple.com/resources/upload/profile/thumbnail/"+data.comment[k].profileImage+"'></a></div><div class='comment-info'><span class='comment-author'><a class='userLink' style='font-weight:bold;' href='profile.html?id="+data.comment[k].member_idx+"'>"+data.comment[k].author+"</a></span><span class='comment-time'>"+timeleft(data.comment[k].create_date)+"</span><div class='comment-content'>"+parseContent(data.comment[k].content.parseEmoji())+"</div></div>";
       	      			if(member_idx == data.comment[k].member_idx){
       	      				comment += "<div class='comment-edit-delete'><button type='button' class='cmt-update' onclick='comment_update_init(this, "+data.comment[k].idx+")'>수정</button><button type='button' onclick='comment_del(this, "+data.comment[k].idx+")' class='cmt-delete'>삭제</button></div></div>";
       	    			}else{
       	    				comment += "<div class='comment-edit-delete'><button type='button' class='cmt-update' onclick='commentReply(this, \""+data.comment[k].member_id+"\")'>답변</button><button type='button' onclick='reports("+data.comment[k].idx+",\"comment\" )' class='cmt-delete'>신고</button></div></div>";
       	    			}
       	    	  		loadComment_cnt++;
    				}
    	    		$("#item-commentList").html(comment);
    	    	}else{
    	    		$("#comment-more").hide();
    	    	}
    	    	
    	    	var elem = document.getElementById("mySwipe");
    	    	window.mySwipe = Swipe(elem, {
    	    		callback: function(index, elem){
    	    			var list = $("#image-list").children("li");
    	    			$("#itembox").css("height", $(elem).height());
    	    			list.each(function(){
    	    				$(this).removeClass("active");
    	    			});
    	    			list.siblings(":nth-child("+(index+1)+")").addClass("active");
    	    		}
    	    	});
    	    	
    	    	if(post_memberIdx == localStorage.getItem("idx")){
    	    		$(".f_action_sheet").prepend("<button style='margin:0;border-radius:0;border-bottom:1px solid #bbb;' onclick='postUpdate("+post_idx+")'>수정하기</button><button onclick='postDelete("+post_idx+")' style='color:#ef4e3a;border-top-left-radius:0;border-top-right-radius:0;'>삭제하기</button>");
    	    	}else{
    	    		$(".f_action_sheet").prepend("<button onclick='reports("+post_idx+", \"post\")' style='color:#ef4e3a;'>신고하기</button>");
    	    	}
    	    	$(".comment").each(function(){
		    		$(this).swipe({
			   			swipeStatus : function(event, phase, direction, distance, duration, fingers){
			   				var box = $(this);
			   				if(direction=="left"){
			   					if(distance < 60){
			   						box.attr("style", "transform:translate3d(-"+distance+"px,0,0);-webkit-transform:translate3d(-"+distance+"px,0,0);-webkit-transition:none;transition:none");
			   						if(phase == "end"){
			   	   						box.removeAttr("style");
			   	   					}
			   					}else{
			   						box.removeAttr("style")
			   						.css({"transform":"translate3d(-130px,0,0)","-webkit-transform":"translate3d(-130px,0,0)"});
			   					}
			   					
			   				}else if(direction=="right"){
			   					box.css({"transform":"translate3d(0,0,0)","-webkit-transform":"translate3d(0,0,0)"});
			   				}
			            },
			            threshold : 0,
			            allowPageScroll:"vertical"
					});
		    	});
    	    }
    	    , beforeSend: function(request) {
				request.setRequestHeader("x-requested-with", "XMLHttpRequest");
    	    }
    	    , complete: function() {
    	    	
    	    }
    	});
		document.addEventListener("backbutton", function(event){
			alert('d');
			history.back();
		}, false);
	}
</script>
</body>
</html>